<template>
  <el-container>
    <!-- 顶部标题栏 -->
    <!-- ===================== 顶部标题栏 ===================== -->
    <el-header
        class="top-header-blue"
        @mouseenter="showTitleAnimation"
        @mouseleave="hideTitleAnimation"
    >
      <div class="title-wrapper">
        <img
            src="https://p26-doubao-search-sign.byteimg.com/labis/0b75bf5f82144a242d2015912640dbc8~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776755672&x-signature=xH20bKksX67t4D06W9Cg9Jv8w%2Bs%3D"
            alt="果乐水吧Logo"
            class="logo-icon"
            :class="{ 'logo-hover': showAnimation }"
        />
        <h1 class="title-text" :class="{ 'title-hover': showAnimation }">
          果乐水吧
        </h1>
      </div>

      <div class="right-actions">
<!--        <span v-if="isLoggedIn" class="welcome-text">欢迎，管理员</span>-->
        <router-link v-if="!isLoggedIn" to="/login" class="action-link">登录</router-link>
<!--        <router-link v-if="!isLoggedIn" to="/register" class="action-link">注册</router-link>-->
        <span v-if="isLoggedIn" class="action-link logout" @click="logout">注销</span>
      </div>
    </el-header>

    <!-- 导航栏区域 -->
    <el-header class="nav-header" v-if="isLoggedIn" style="background-color: #fff; padding: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);">
      <el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" style="height: 100%;">
        <el-tab-pane
            v-for="(tab, index) in tabs"
            :key="tab.path"
            :label="tab.title"
            :name="tab.path"
            closable
        ></el-tab-pane>
      </el-tabs>
    </el-header>

    <!-- 主内容区域 -->
    <el-container>
      <el-aside width="275px" style="background-color: #f5f7fa; border-right: 1px solid #e4e7ed;">
        <Left_menu :roleid="roleid" />
      </el-aside>
      <el-main class="main-content" style="padding: 20px; background-color: #f0f2f5;">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
        <!-- 首页欢迎信息 -->
        <div v-if="route.path === '/'" class="welcome-message fade-in" style="margin-bottom: 20px;">
          <div style="display: flex; align-items: center; margin-bottom: 15px;">
            <img
                src="https://p3-doubao-search-sign.byteimg.com/tos-cn-i-be4g95zd3a/925213591442685985~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776755672&x-signature=X7FicGLrXpteAO7tolT4MHcuirI%3D"
                alt="Logo"
                style="width: 40px; height: 40px; margin-right: 10px;"
            >
            <h2 style="margin: 0; color: #333; font-size: 1.5em;">欢迎来到“果乐”水吧综合管理系统</h2>
          </div>
          <p style="margin: 5px 0; color: #666; line-height: 1.6;">
            这里是您管理水吧业务的高效平台，祝您使用愉快！
<!--            <span v-if="isLoggedIn" style="color: #FF69B4; font-weight: 500;">当前用户: 管理员</span>-->
          </p>
        </div>

        <!-- 未登录提示 -->
        <div v-if="route.path === '/' && !isLoggedIn" class="login-prompt" style="text-align: center; padding: 50px 0; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);">
          <img
              src="https://p26-doubao-search-sign.byteimg.com/labis/b68186914eecc810ce5dc80cb43131bc~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1776755661&x-signature=U81n47C99yUfkX4ElixnN9XJlBE%3D"
              alt="水吧"
              style="width: 200px; height: 200px; margin: 0 auto 20px; display: block; border-radius: 50%;"
          >
          <h2 style="margin: 0 0 15px 0; color: #333;">欢迎访问果乐水吧管理系统</h2>
          <p style="margin: 0 0 20px 0; color: #666;">请登录后继续操作</p>
          <el-button
              type="primary"
              @click="goToLogin"
              style="background-color: #6970ff; border-color: #1495ff; margin-right: 10px;"
          >
            立即登录
          </el-button>
          <el-button
              type="default"
              @click="goToRegister"
          >
            注册账号
          </el-button>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { defineProps, computed, ref, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Left_menu from "@/views/frame/left_menu.vue";
import { Star } from '@element-plus/icons-vue';

// 定义roleid prop
const props = defineProps({
  roleid: {
    type: Number,
    required: true,
    default: 1 // 默认管理员角色
  }
});

const router = useRouter();
const route = useRoute();

// 登录状态
const isLoggedIn = computed(() => localStorage.getItem('token') !== null);

// 标签管理
const activeTab = ref('/');
const tabs = ref([{ path: '/', title: '首页' }]);

// 添加标签
const addTab = (targetName) => {
  const menu = getMenuByPath(targetName);
  if (menu) {
    const exists = tabs.value.some(item => item.path === targetName);
    if (!exists) {
      tabs.value.push({
        path: targetName,
        title: menu.menuName
      });
    }
    activeTab.value = targetName;
  }
};

// 移除标签
const removeTab = (targetName) => {
  const tabsList = tabs.value;
  const newTabs = tabsList.filter(item => item.path !== targetName);
  let newActiveName = activeTab.value;

  if (newActiveName === targetName) {
    if (newTabs.length > 0) {
      newActiveName = newTabs[newTabs.length - 1].path;
    } else {
      newActiveName = '/';
    }
  }

  tabs.value = newTabs;
  activeTab.value = newActiveName;

  // 如果最后只保留首页标签
  if (tabs.value.length === 1 && tabs.value[0].path === '/') {
    router.push('/');
  }
};

// 根据路径获取菜单信息
const getMenuByPath = (path) => {
  const menuMap = {
    '/product': { menuName: '产品管理' },
    '/material': { menuName: '材料管理' },
    '/employee/info': { menuName: '员工基础信息' },
    '/activity': { menuName: '活动管理' },
    '/order': { menuName: '订单管理' },
    '/backend': { menuName: '基础信息管理' },
    '/employee/approve': { menuName: '请假审批' },
    '/employee/schedule': { menuName: '排班表管理' },
    '/checkin': { menuName: '签到打卡' },
    '/leave': { menuName: '请假' },
    '/delivery/receiving': { menuName: '外卖接单' },
    '/myschedule': { menuName: '排班表' },
    '/productbrowsing': { menuName: '浏览商品' },
    '/manage/staff': { menuName: '账号管理' },
    '/show': { menuName: '操作记录查看' },
    '/record': { menuName: '销售记录' },
    '/showvue': { menuName: '数据图示' },
    '/operationlog': { menuName: '操作记录' },
    '/screen': { menuName: '大屏叫号' },
    '/abnormal-upload': { menuName: '异常订单上传' },
    '/exceptionHandle': { menuName: '异常订单处理' },
    '/member': { menuName: '会员管理' },
    '/Order-sales-amount': { menuName: '订单销售额' },
    '/commodity-sales-volume': { menuName: '商品销售量' },
    '/attendance-statistics': { menuName: '出勤统计' }
  };
  return menuMap[path] || { menuName: '未知页面' };
};

// 监听路由变化，添加标签
watch(route, (newRoute) => {
  if (isLoggedIn.value) {
    addTab(newRoute.path);
  }
}, { immediate: true });

// 处理标签点击事件
watch(activeTab, (newTab) => {
  router.push(newTab);
});

// 注销函数
const logout = () => {
  localStorage.removeItem('token');
  tabs.value = [{ path: '/', title: '首页' }];
  activeTab.value = '/';
  router.push('/login');

  // 显示注销成功提示
  ElMessage.success('注销成功！');
};

// 动画控制
const showAnimation = ref(false);
const linkScale = ref(1);
const cardHoverIndex = ref(-1);

const showTitleAnimation = () => {
  showAnimation.value = true;
};

const hideTitleAnimation = () => {
  showAnimation.value = false;
};

const scaleLink = () => {
  linkScale.value = 1.1;
};

const resetLink = () => {
  linkScale.value = 1;
};

const handleCardHover = (index, isHover) => {
  if (isHover) {
    cardHoverIndex.value = index;
  } else {
    cardHoverIndex.value = -1;
  }
};

// 跳转页面
const goToPage = (path) => {
  router.push(path);
};

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login');
};

// 跳转到注册页面
const goToRegister = () => {
  router.push('/register');
};

const isLoading = ref(true);

onMounted(() => {
  // 模拟加载数据
  setTimeout(() => {
    isLoading.value = false;
  }, 1500);

  // 如果未登录且不是登录/注册页面，跳转到登录页面
  if (!isLoggedIn.value && route.path !== '/login' && route.path !== '/register') {
    router.push('/login');
  }
});
</script>

<style scoped>
/* ===================== 蓝色顶部栏 ===================== */
.top-header-blue {
  height: 60px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(45deg, #e3f2ff, #bbdefb);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  font-family: "Source Han Sans CN", "PingFang SC", sans-serif;
  transition: background 0.3s ease;
}

.title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.logo-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.logo-hover {
  transform: scale(1.1) rotate(10deg);
}

.title-text {
  margin: 0;
  font-size: 1.8rem;
  background: linear-gradient(45deg, #1976d2, #42a5f5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease;
}
.title-hover {
  transform: scale(1.05);
}

.right-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.welcome-text {
  color: #546e7a;
  font-size: 14px;
}
.action-link {
  color: #1976d2;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.action-link:hover {
  background: rgba(25, 118, 210, 0.08);
  color: #0d47a1;
}
.logout {
  cursor: pointer;
}

/* 响应式 */
@media (max-width: 600px) {
  .top-header-blue {
    flex-direction: column;
    height: auto;
    padding: 10px 16px;
  }
  .title-wrapper {
    margin-bottom: 8px;
  }
  .right-actions {
    gap: 12px;
  }
}
</style>